<!-- 轮播图管理 -->
<template>
  <ContainerSlot>
    <template slot="operationModule">
      <div class="mt-20">
        <el-button class="opt" type="primary" @click="add" plain>
          <i class="el-icon-circle-plus-outline"></i>
          添加
        </el-button>
        <el-button class="opt" type="danger" @click="handleDelete()" plain :disabled="!delActive">
          <i class="el-icon-delete"></i>
          删除
        </el-button>
      </div>
    </template>
    <template slot="contentModule">
      <Table v-loading="loading" :propList="propList" :listData="tableData" :showSelectColumn="true"
        @handleSelectionChange="handleSelectionChange">
        <template slot="img" slot-scope="scope" v-if="scope.row.slideshowImgId">
          <img class="imgScale" :src="scope.row.slideshowImgUrl" alt=" ">
        </template>
        <template slot="operation" slot-scope="scope" v-if="scope.row.slideshowImgId">
          <el-button class="opt" type="primary" @click="handleEdit(scope.row)" plain>
            <i class="el-icon-edit-outline"></i>
            修改
          </el-button>
          <el-button class="opt" type="danger" @click="handleDelete(scope.row)" plain>
            <i class="el-icon-delete"></i>
            删除
          </el-button>
        </template>
      </Table>

      <el-dialog :close-on-click-modal='false' :title="dialogTitle + '轮播图片'" :visible.sync="dialogFormVisible"
        :before-close="cancel" width="35%">
        <el-form ref="addForm" label-position="right" :model="addForm" class="el-form" :rules="rules" label-width="120px">
          <el-form-item label="轮播图片:" prop="slideshowImgUrl">
            <Upload ref="uploadImg" :limit="1" :urlList="addForm.imgUrlList" @getFile="getFile"></Upload>
          </el-form-item>
          <el-form-item label="关联产品:" prop="productId">
            <el-select v-model="addForm.productId" filterable placeholder="请选择关联产品" style="width: 100%;">
              <el-option v-for="item in prodList" :key="item.productId" :label="item.productTitle"
                :value="item.productId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel">
            取 消
          </el-button>
          <el-button class="zh-button-two" type="primary" @click="save">
            保 存
          </el-button>
        </div>
      </el-dialog>
    </template>
    <template slot="footerModule">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        background :page-size="pageSize" :page-sizes="[10, 20, 30]" layout=" prev, pager, next, jumper" :total="total">
      </el-pagination>
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container'
import Table from '@/components/Table'
import Upload from "@/components/Upload"

import rotationApi from "@/api/finance-insurance/financial-rotation-management"

export default {
  name: '',
  components: { ContainerSlot, Table, Upload },
  data () {
    return {
      delActive: false,
      loading: false,
      // 表格
      total: 0,
      currentPage: 1,
      pageSize: 10,
      propList: [
        { prop: "slideshowImgUrl", label: "轮播图片", slotName: "img" },
        { prop: "productTitle", label: "关联产品" },
        { label: "操作", slotName: "operation" },
      ],
      tableData: [],
      // 新增编辑弹框
      dialogTitle: '',
      dialogFormVisible: false,
      nowChanceStau: '',
      addForm: {
        slideshowImgUrl: '',
        imgUrlList: [],
        productId: '',
      },
      rules: {
        slideshowImgUrl: [
          { required: true, message: '请上传轮播图片', trigger: ['change', 'blur'] },
        ],
        productId: [
          { required: true, message: '请输入关联产品', trigger: ['change', 'blur'] },
        ],
      },
      prodList: []
    }
  },
  watch: {
    dialogFormVisible (v) {
      if (v) {
        this.$nextTick(() => {
          this.$refs.addForm.clearValidate()
        })
      }
    }
  },
  async mounted () {
    await this.queryProdList()
    this.queryPageList()
  },
  methods: {
    queryPageList () {
      this.loading = true
      rotationApi.queryPageByCondition({
        page: this.currentPage,
        size: this.pageSize,
        condition: {}
      }).then(res => {
        let { data } = res
        data.content.map(el => {
          let index = this.prodList.findIndex(ele => {
            return el.productId == ele.productId
          })
          index != -1 && (el.productTitle = this.prodList[index].productTitle)
        })
        this.tableData = data.content
        this.total = data.totalElements
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 获取产品数据
    async queryProdList () {
      await rotationApi.queryByConditionProduct({}).then(res => {
        this.prodList = res.data
      })
    },
    // 分页跳转
    handleCurrentChange (e) {
      this.currentPage = e
      this.queryPageList()
    },
    handleSizeChange (e) {
      this.pageSize = e
      this.queryPageList()
    },
    // 上传图片
    getFile (file) {
      this.addForm.slideshowImgUrl = file[0] ? file[0].url : ''
      this.$refs.addForm.validateField(['slideshowImgUrl'], () => { })
    },
    // 添加
    add () {
      this.openDialog('add')
    },
    handleEdit (row) {
      this.addForm = { ...row }
      this.addForm.imgUrlList = this.addForm.slideshowImgUrl ?
        [{ name: this.addForm.slideshowImgUrl, url: this.addForm.slideshowImgUrl }] : []
      this.openDialog('edit')
    },
    // 删除
    handleDelete (row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      }).then(() => {
        rotationApi.delList({
          idList: (row ? [row.slideshowImgId] : this.idList).join(',')
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功！")
            this.queryPageList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    openDialog (type) {
      this.dialogFormVisible = true
      this.dialogTitle = type === "add" ? "新增" : "编辑"
      this.nowChanceStau = type
    },
    cancel () {
      this.$refs.uploadImg && this.$refs.uploadImg.clearFile()
      this.$refs.uploadImg && (this.$refs.uploadImg.uploadFileList = [])
      this.dialogFormVisible = false;
      this.addForm = {};
    },
    save () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addForm.slideshowImgUrl = this.$refs.uploadImg.uploadFileList[0].url
          rotationApi[this.nowChanceStau](this.addForm).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg)
              this.cancel()
              this.queryPageList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    handleSelectionChange (list) {
      this.idList = []
      this.idList = list.map(item => {
        return item.slideshowImgId
      });
      if (
        this.idList &&
        this.idList.length > 0
      ) {
        this.delActive = true
      } else this.delActive = false
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  width: 100%;
  background-color: #329eef;
  padding: 15px;

  .el-dialog__title {
    font-weight: 700;
    color: #fff;
  }

  .el-dialog__close {
    font-size: 22px;
    color: #fff;
    font-weight: 700;
  }
}

.el-form-item {

  // display: flex;
  .el-form-item__label {
    line-height: 36px;
    text-align: end;
    font-weight: normal;
  }

  .el-form-item__content {
    line-height: 36px;
    width: 100%;
    display: flex;
  }
}

::v-deep .imgScale {
  height: 50px;
}
</style>
